<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

   
 
  
  <div id="box2DIv" class="box1">
    
    <div v-if="this.calculateFlag==0">

      <el-form  ref="form"  label-position="right" :readonly="readonlyFlag"  label-width="200px" :model="formInline" style="margin: 10vh;margin-top:2vh;width: 80%;text-align: center;" class="demo-form-inline">
        
        
        <el-row gutter="20"> 

          <el-col :span="12">
            <el-form-item label="PEMFC电堆额定电功率：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.pemfcRatedPower">
                  <template slot="append">kW</template>
                </el-input>
            </el-form-item> 
          </el-col>

          <el-col :span="12">

            <el-form-item label="氢气价格：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.hydrogenPrices">
                  <template slot="append">元/m³</template>
                </el-input>
            </el-form-item> 
          </el-col>  
          
        </el-row>

        <el-row gutter="20"> 
          <el-col :span="12">
            <el-form-item label="售电价格：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.elecSellPrice">
                  <template slot="append">元/kWh</template>
                </el-input>
            </el-form-item> 
          </el-col>  
          <el-col :span="12">
            <el-form-item label="铂载量：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.platinumLoadCapacity">
                  <template slot="append">mg/cm²</template>
                </el-input>
            </el-form-item> 
          </el-col>  
          
        </el-row>
        
        
        <el-row gutter="20"> 
          <el-col :span="12">
            <el-form-item label="供热价格：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.heatingPrices">
                  <template slot="append">元/kWh</template>
                </el-input>
            </el-form-item> 
          </el-col> 
          <el-col :span="12"> 
            <el-form-item label="铂金价格：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.platinumPrice">
                  <template slot="append">元/mg</template>
                </el-input>
            </el-form-item> 
          </el-col>  
        </el-row>

              
        
        <el-row gutter="20"> 
          <el-col :span="12">
            <el-form-item label="年运营⼩时数：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.annualOperatingHours">
                </el-input>
            </el-form-item> 
          </el-col>  
          <el-col :span="12">
            <el-form-item label="空压机效率：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.airCompressorEfficiency">
                </el-input>
            </el-form-item> 
          </el-col>  

        </el-row>

        <el-row gutter="20"> 
          <el-col :span="12">
            <el-form-item label="总运营年数：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.totalOperatingYears">
                </el-input>
            </el-form-item> 
          </el-col>  

          <el-col :span="12">
            <el-form-item label="水泵效率：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.waterPumpEfficiency">
                </el-input>
            </el-form-item> 
          </el-col>  
        </el-row>

        
        <el-row gutter="20"> 
          
          <el-col :span="12">
            <el-form-item label="维护系数：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.maintenanceFactor">
                </el-input>
            </el-form-item> 
          </el-col>

          <el-col :span="12">
            <el-form-item label="利率：">
              <el-input style="width:60%;margin-top: 0vh;" v-model="form.interestRate">
                </el-input>
            </el-form-item> 
          </el-col>

        </el-row>

        <el-row gutter="20"> 
          
          <el-col :span="12">
            <el-form-item label="计算状态：">
              <el-input style="width:60%;margin-top: 0vh;" readonly="true" v-model="calculationStatusLabel">
                </el-input>
            </el-form-item> 
          </el-col>

          <el-col :span="12">
            <el-form-item label="计算开始时间：">
              <el-input style="width:60%;margin-top: 0vh;" readonly="true" v-model="form.calculationStartTime">
                </el-input>
            </el-form-item> 
          </el-col>
          
        </el-row>

        <el-row gutter="20"> 
          
          <el-col :span="12">
            <el-form-item label="计算结束时间：">
              <el-input style="width:60%;margin-top: 0vh;" readonly="true" v-model="form.calculationEndTime">
                </el-input>
            </el-form-item> 
          </el-col>

          <el-col :span="12">
            <el-form-item label="计算耗时：">
              <el-input style="width:60%;margin-top: 0vh;" readonly="true" v-model="form.calculationTime">
                </el-input>
            </el-form-item> 
          </el-col>
          
        </el-row>

        
      </el-form>
      
    </div>

    <div style="height: 85%;" v-if="this.calculateFlag==1">

  
      <div style="" class="box2">
      
        <div class="titleDiv">
          <div class="barColorBox"></div> 
          <div class="titlefont">输出参数</div>
        </div> 

        
       <div style="margin-top: 1vh;width: 100%;;">
         
       
         <div style="width: 100%;margin-left: 1vh;" class="inputBox">
           <div style="padding-top: 1.5vh;">PEMFC热电联供系统单位kW投资成本</div>
           <div>{{ priceFor(investmentCost) }}元</div> 
         </div>

         <div style="width: 100%;margin-left: 1vh;" class="inputBox">
           <div style="padding-top: 1.5vh;">项目资本金净利润率ROE</div>
           <div>{{ roe }}%</div> 
         </div>
 
       </div>
          
        <div style="margin-top: 0.1vh;width: 95%;display: inline-flex;">
          
          <div class="inputBox">
            <div style="padding-top: 1.5vh;">项目总投资</div>
            <div>{{ priceFor(totalInvestmentProject) }}万元</div> 
          </div>
                  
          <div class="inputBox">
            <div style="padding-top: 1.5vh;">项目投资回收期</div>
            <div>{{ projectInvestmentPaybackPeriod }}年</div> 
          </div>

        </div>

        <div style="margin-top: 0.1vh;width: 95%;display: inline-flex;">
         
         <div class="inputBox">
           <div style="padding-top: 1.5vh;">销售收入总额</div>
           <div>{{priceFor(totalSalesRevenue)}}万元</div> 
         </div>
                  
         <div class="inputBox">
           <div style="padding-top: 1.5vh;">财务内部收益率</div>
           <div>{{ financialInternalRate }}%</div> 
         </div>
 
       </div>

       <div style="margin-top: 0.1vh;width: 95%;display: inline-flex;">
         
         <div class="inputBox">
           <div style="padding-top: 1.5vh;">总成本费用</div>
           <div>{{ priceFor(totalCost) }}万元</div> 
         </div>
                  
         <div class="inputBox">
           <div style="padding-top: 1.5vh;">财务净现值</div>
           <div>{{ priceFor(netPresentValue) }}万元</div> 
         </div>
 
       </div>

       <div style="margin-top: 0.1vh;width: 95%;display: inline-flex;">
          <div class="inputBox">
           <div style="padding-top: 1.5vh;">利润总额</div>
           <div>{{ priceFor(totalProfit) }}万元</div> 
          </div>
         
        
                  
          <div class="inputBox">
           <div style="padding-top: 1.5vh;">总投资收益率ROI</div>
           <div>{{ roi }}%</div> 
          </div>
 
       </div>


      </div>

      <div class="box3">
        <div id="barCharts1" style="width: 98%;height: 48%;margin: 1vh auto;"></div>

        <div id="barCharts2" style="width: 98%;height: 48%;margin: 1vh auto;"></div>
      </div>
  

    </div>
    
    <div id="buttonDiv" style="margin-top: 5vh;width: 100%;text-align: center;position: absolute;">

      <el-button  v-if="this.suspendCalculatFlag==1" type="primary" @click="suspendCalculat()" style="width: 110px">
        <span class="button-text">中止计算</span>
      </el-button>

      <el-button type="primary" v-if="this.calculateFlag=='0'" @click="calculate()" style="width: 110px">
          <span class="button-text">{{buttonText}}</span>
      </el-button>

      <el-button type="primary" v-if="this.form.calculationStatus=='2'&&this.calculateFlag=='0'" @click="clearPageData()" style="width: 110px">
          <span class="button-text">清空</span>
      </el-button>

      <el-button type="primary" v-if="this.form.calculationStatus==2&&this.calculateFlag=='0'" @click="captureData()" style="width: 110px">
          <span class="button-text">抓取数据</span>
      </el-button>

      <el-button type="primary" v-if="this.calculateFlag=='1'" @click="back()" style="width: 110px">
          <span class="button-text">返回</span>
      </el-button>

    </div>
    

  </div>
 
</div>
  
</template>

<script>






  // 引入基本模板,按需加载
  let echarts = require('echarts/lib/echarts');

  import priceUtil from '../../assets/js/priceUtil.js'

  export default {
    name: 'pemfcEconomicAnalysis',
    data() {
      return {
        suspendCalculatFlag : "0",
        form: {
          id:"",
          projectId : "",
          pemfcRatedPower: '',
          hydrogenPrices: '',
          elecSellPrice: '',
          platinumLoadCapacity: '',
          heatingPrices: '',
          platinumPrice: '',
          annualOperatingHours: '',
          airCompressorEfficiency: '',
          totalOperatingYears: '',
          waterPumpEfficiency: '',
          maintenanceFactor: '',
          interestRate: '',
          calculationStatus: '0',
          calculationStartTime: '',
          calculationEndTime: '',
          calculationTime: '',
        },
        calculationStatusLabel : '',
        totalInvestmentProject:"-", 
        projectInvestmentPaybackPeriod:"-", 
        totalSalesRevenue:"-", 
        financialInternalRate:"-", 
        totalCost:"-", 
        netPresentValue:"-", 
        investmentCost:"-", 
        roi:"-", 
        totalProfit:"-", 
        roe:"-", 
        readonlyFlag : false,
        projectId : "",

        calculateFlag:"0", 
        buttonText:"计算",
        activeDate: '',
        type: '', 
      }
    },
    mounted: function() {
      //获取项目id
      this.projectId = this.$route.query.projectId;

      this.form.projectId = this.projectId;
      this.queryPageData();
    },
    methods: {
      
      captureData: function(){
        
        this.$prompt('请输入生成的数据指标名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',  
        }).then(({ value }) => {

        var dataName = value;
        
          const loading = this.$loading({
            lock: true,
            text: '数据抓取中，请稍等',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });

          var url = "captureData";

          this.$http.post('/iepsapi/ieps/basicDatabase/'+url+'?dataName='+dataName+"&type=pemfc").then((res) => {
            var successFlag = res.data.successFlag;
            if(successFlag=="success"){

              loading.close();

              this.$message({
                type: 'success',
                message: '操作成功，请前往基础数据库查看生成的数据!'
              });

            }else{
  
              this.$message({
                type: 'info',
                message: '抓取失败!'
              });

            }
          }).catch((error) => {
            console.log(error);
          });
          
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });

      },


      priceFor : function(price){
        var value = window.priceFor(price);
        return value;
      },
      clearPageData : function(){
        //this.calculateFlag = "0";
        this.form = {
          id:"",
          projectId : "",
          pemfcRatedPower: '',
          hydrogenPrices: '',
          elecSellPrice: '',
          platinumLoadCapacity: '',
          heatingPrices: '',
          platinumPrice: '',
          annualOperatingHours: '',
          airCompressorEfficiency: '',
          totalOperatingYears: '',
          waterPumpEfficiency: '',
          maintenanceFactor: '',
          interestRate: '',
          calculationStatus: '0',
          calculationStartTime: '',
          calculationEndTime: '',
          calculationTime: '',
        }
        this.form.projectId = this.projectId;
        this.calculationStatusLabel = "未计算";
        this.buttonText = "计算";
      },


      back : function(){
        this.calculateFlag = 0;
      },

      queryPageData : function(){

        var vm = this;
        vm.suspendCalculatFlag = "0";

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryPageData?projectId='+this.projectId+"&tableName=pemfc_economic_analysis").then((res) => {
          var result = res.data.data;
          if(result){
            vm.form = result;
            
            var calculationStatus = vm.form.calculationStatus;

            if(calculationStatus=="0"){
              vm.buttonText = "计算";
              vm.calculationStatusLabel = '未计算';

            }else if(calculationStatus=="1"){
              vm.buttonText = "刷新";
              vm.readonlyFlag = false;
              vm.calculationStatusLabel = '计算中';
              
              var calculationStartTime = vm.form.calculationStartTime;
              var calculationEndTime = vm.form.calculationEndTime;

              // 创建两个Date对象
              var startTime = new Date(calculationStartTime);
              var endTime;
              if(calculationEndTime&&calculationEndTime!="-"){
                endTime = new Date(calculationEndTime);
              }else{
                endTime = new Date();
              }
              
              // 计算两个时间点之间的差值（毫秒）
              var diff = endTime - startTime;
              
              // 将毫秒转换为分钟
              var minutes = Math.floor(diff / (1000 * 60));

              if(minutes>=5){
                vm.suspendCalculatFlag = "1";
                this.$message({
                  message: '当前算法计算时间超过五分钟，请中止计算，校核输入！',
                  type: 'info'
                });
              }else{
                vm.suspendCalculatFlag = "0";
              }

            }else if(calculationStatus=="2"){
              vm.calculationStatusLabel = '已完成';
              vm.buttonText = "查看结果";
            }else{
              vm.form.calculationStatus = "0";
            }
 

          }
        }).catch((error) => {
          console.log(error);
        });


      },

      suspendCalculat: function(){
        
        var vm = this;

        this.$http.post('/iepsapi/ea/algorithm/suspendCalculat?algorithmType=pemfc'+""+"&tableName=pemfc_economic_analysis").then((res) => {
          vm.queryPageData();
        }).catch((error) => {
          console.log(error);
        });

      },


      calculate : function(){

        var vm = this;

        //去计算
        if(this.form.calculationStatus=="0"){
            
          const loading = this.$loading({
            lock: true,
            text: '调用算法中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });

          
          this.$http.post('/iepsapi/ea/algorithm/calculatePemfc?id='+this.form.id+"&tableName=pemfc_economic_analysis"+"&projectId="+this.projectId, {
            "pageData": JSON.stringify(this.form)
          }).then((res) => {
            
            var result = res.data;
          
            if(result){
 
              loading.close();
            
              this.$message({
                message: '算法调用成功',
                type: 'success'
              });
             
              vm.form = result;
              vm.buttonText = "刷新";

            }
          }).catch((error) => {
            console.log(error);
          });




        }else if(this.form.calculationStatus=="1"){

          this.queryPageData();

        }else if(this.form.calculationStatus=="2"){
          
          var vm = this;

          this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryPemfcCalculationResult?id='+this.form.id+"&tableName=pemfc_ea_result"+"&projectId="+this.projectId).then((res) => {
          
            var result = res.data;
          
            if(result){

              vm.$message({
                message: '计算成功',
                type: 'success'
              });
            
              vm.calculateFlag = 1;
              vm.buttonText = "查看结果";

              vm.totalInvestmentProject = result.totalInvestmentProject;
              vm.projectInvestmentPaybackPeriod = result.projectInvestmentPaybackPeriod;
              vm.totalSalesRevenue  = result.totalSalesRevenue;
              vm.financialInternalRate = result.financialInternalRate;
              vm.totalCost = result.totalCost;
              vm.netPresentValue = result.netPresentValue;
              vm.investmentCost = result.investmentCost;
              vm.totalProfit = result.totalProfit;
              vm.roe = result.roe;
              vm.roi = result.roi;
              vm.financialInternalRate = result.financialInternalRate;
                   
              this.$nextTick(function(){

                var cfoyChartData = result.cfoyChartData;
                var npvChartData = result.npvChartData;

                let barCharts1 = this.$echarts.init(document.getElementById('barCharts1'))
                let barCharts2 = this.$echarts.init(document.getElementById('barCharts2')) 

                var barOption1 = vm.getBarOption();
                var barOption2 = vm.getBarOption(); 

                barCharts1.clear(); 
                barCharts2.clear();  

                barOption1.title.text = "历年现金流";
                
                if(cfoyChartData){  
                  barOption1.xAxis[0].data = cfoyChartData.xAxisData;
                  barOption1.series[0].data = cfoyChartData.seriesData;
                }else{
                  barOption1.xAxis[0].data = [];
                  barOption1.series[0].data = [];
                }
  
                barOption2.title.text = "净现值";
                    
                if(npvChartData){
                  barOption2.xAxis[0].data = npvChartData.xAxisData;
                  barOption2.series[0].data = npvChartData.seriesData;
                }else{
                  barOption2.xAxis[0].data = [];
                  barOption2.series[0].data = [];
                }

                barCharts1.setOption(barOption1); 
                barCharts2.setOption(barOption2);  

                window.onresize = function(){
                  barCharts1.resize(); 
                  barCharts2.resize();  
                }
              

              });

              
            }
          }).catch((error) => {
            console.log(error);
          });

      
        }

      },

      
      getBarOption:function(){
                
 
        var barOption = {
            
          title: {
              text: '',
              left: 'center',
              top: 5,
              textStyle: {
                color: '#fff',
                fontWeight: 'normal',
                fontSize: 20
              }
          },
          legend: { // 图示例样式
              show: true,
              top: 50,
              right: 50,
              itemGap: 20,
              textStyle: {
                color: '#fff',
              },
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              // top: 10,
              left: '1%',
              right: '1%',
              bottom: '1%',
              containLabel: true,
          },
          xAxis: [{
              type: 'category',
              data: [],
              axisTick: {
                // 其他可选属性，如对齐方式等
                alignWithLabel: true // 刻度线是否与标签对齐，默认false
              },
              axisLabel: {
                padding: [3, 0, 0, 0],
                formatter: '{value}',
                color: 'rgba(95, 187, 235, 1)',
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                },
              },
              // 设置 X 轴线条粗细
              axisLine: {
                lineStyle: {
                    width: 1, // 根据需求调整数值大小，单位是像素
                    color: '#999',
                }
              }
          }],
          yAxis: [{
              name:"元",
              nameTextStyle: {
                color: '#f2f2f2',
              },
              type: 'value',
              axisLabel: {
                padding: [3, 0, 0, 0],
                formatter: '{value}',
                color: 'rgba(95, 187, 235, 1)',
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                },
              },
              axisTick: {
                show: false, // 默认为true，如果要隐藏，则改为 false

              },
              axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#999',
                },
              },
              splitLine: {
                lineStyle: {
                    width: 1,
                    color: '#999',
                },
              },
          }],
          series: [{
              data: [],
              type: 'bar',
              barWidth: 20, // 根据需求调整数值大小，单位是像素
              itemStyle: {
                color: '#2283cf',
              }
          }],
          // 添加点击事件的处理函数
          emphasis: {
              itemStyle: {
                color: '#2283cf',
                barWidth: 20, // 根据需求调整数值大小，单位是像素
              },
              barWidth: 24, // 根据需求调整数值大小，单位是像素
          },
        }

        return barOption;
      },

 
       
    }
  }
</script>



<style>

.el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}
  .el-form--inline .el-form-item__content {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1vh;
  }

  .el-radio {
      color: #eff4ff;
      cursor: pointer;
      margin-right: 30px;
  }

  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 

  .inputBox{
    background-image: url(../../assets/images/infoBackground3.png);
    margin: 0 auto;
    width: 56%;
    height: 9vh;
    background-repeat: round;
    opacity: 0.8;
    border-radius: 6px;
    font-size: 1vw;
    color: #ffffff;
  }

  .buttonStyle {
    height: 4vh;
    width: 27vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }
 
 

  .box1{ 
    width: 96%;
    height: 68vh;
    margin-top: 1vh;
    margin: 0 auto;
    top: 10.5vh;
    left: 3.5vh;
    position: absolute;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  
  .box2{  
    width: 33%;
    height: 87%;
    position: absolute;
    left: 2vh;
    top: 2vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box3{ 
    width: 64%;
    height: 87%;
    position: absolute;
    left: 58vh;
    top: 2vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }

  
.titleDiv {
   width: 100%;
   margin: 0.5vh;
   height: 2.5vh; 
   font-weight: bold; 
   -webkit-box-shadow: none;
   box-shadow: none;
   font-weight: 700;
   font-style: normal;
   font-size: 2vh;
   color: #f2f2f2;
   text-align: left;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   position: relative;
 }
 .barColorBox {
   height: 2.5vh;
   width: 0.7vh;
   border-radius: 1px;
   display: inline-block;
   vertical-align: text-bottom;
   border: none;
   box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
   background-color: #FAFAFA;
   background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
   background-image: -o-linear-gradient(top,#17b4db,#07c968);
   background-image: -ms-linear-gradient(top,#17b4db,#07c968);
   background-image: linear-gradient(top,#17b4db,#07c968);
   background-repeat: repeat-x;
 }

 .titlefont {
   flex: 1;
   height: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   font-size: 1.8vh;
    padding-left: 5px;
    margin-top: 0vh;
 }
</style>
